<template>
  <view class="container">
    <view class="box head">
      <view class="box_left">头像</view>
      <view class="box_right">
        <image src="/static/my/avatar.jpg" mode=""></image>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="box_left">昵称</view>
      <view class="box_right">
        小包子
      </view>
    </view>
    <view class="box">
      <view class="box_left">手机号</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.phone" inputAlign="right" placeholder="请输入手机号" border="none">
        </uv-input>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="box_left">地址</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.addess" inputAlign="right" placeholder="请输入地址" border="none">
        </uv-input>
      </view>
    </view>
    <view class="box">
      <view class="box_left">性别</view>
      <view class="box_right" @click="showSexSelect">
        <uv-input v-model="model.userInfo.sex" disabled inputAlign="right" disabledColor="#ffffff" placeholder="请选择性别"
          border="none">
        </uv-input>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="box_left">生日</view>
      <view class="box_right" @click="showDateSelect">
        <uv-input v-model="model.userInfo.birthday" disabled inputAlign="right" disabledColor="#ffffff"
          placeholder="请选择生日" border="none">
        </uv-input>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="box_left">公司</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.addess" inputAlign="right" placeholder="请输入公司" border="none">
        </uv-input>
      </view>
    </view>
    <view class="box">
      <view class="box_left">职位</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.addess" inputAlign="right" placeholder="请输入职位" border="none">
        </uv-input>
      </view>
    </view>
    <button class="ok_btn" @tap="ok">保存</button>
    <uv-action-sheet ref="sexSelectRef" :actions="actions" title="请选择性别" safeAreaInsetBottom @select="sexSelect">
    </uv-action-sheet>
    <uv-datetime-picker ref="datetimePickerRef" :formatter="formatter" v-model="model.birthdays" mode="date"
      @confirm="dateChange">
    </uv-datetime-picker>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { timestampToDateFormat } from '../../../common/common';
  const sexSelectRef = ref()
  const datetimePickerRef = ref()
  const model = reactive<{
    userInfo : any;
    birthdays: number;
  }>({
    userInfo: {},
    birthdays: 0,
  })
  const actions = [{
    name: '男',
  }, {
    name: '女',
  }]
  const ok = () => {

  }
  const showSexSelect = () => {
    sexSelectRef.value?.open()
    uni.hideKeyboard()
  }
  const sexSelect = (e : any) => {
    console.log(e)
    model.userInfo.sex = e.name
  }
  const showDateSelect = () => {
    model.birthdays = new Date(model.userInfo.birthday?? '').getTime()
    datetimePickerRef.value?.open()
    uni.hideKeyboard()
  }
  const formatter = (type : any, value : any) => {
    if (type === 'year') {
      return `${value}年`
    }
    if (type === 'month') {
      return `${value}月`
    }
    if (type === 'day') {
      return `${value}日`
    }
    return value
  }
  const dateChange = (e : any) => {
    console.log(e)
    model.userInfo.birthday = timestampToDateFormat(e.value)
  }
</script>

<style lang="less" scoped>
  .container {
    width: 750rpx;
    height: 100%;
    background-color: #f4f4f4;

    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 750rpx;
      height: 100rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-bottom: 1px solid rgba(#000, .1);

      &:last-child {
        border-bottom: 0;
      }

      &_left {
        width: 120rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }

      &_right {
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;

        :deep(.uv-input__content__field-wrapper__field) {
          text-align: right;
        }
      }
    }

    .head {
      height: 140rpx;

      image {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        margin-right: 5rpx;
      }
    }

    .ok_btn {
      width: 592rpx;
      height: 88rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 20rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
      margin-top: 200rpx;

      &:active {
        transform: translateY(2px);
      }
    }
  }
</style>